<li #dragElement
  [class.ant-tree-treenode-disabled]="nzTreeNode.isDisabled"
  (dblclick)="_dblClickNode($event,nzTreeNode)"
  (click)="_clickNode($event,nzTreeNode)"
  (contextmenu)="_contextMenuNode($event,nzTreeNode)">
  <ng-container *ngIf="nzShowExpand">
    <span
      class="ant-tree-switcher"
      [ngStyle]="loadingStyle"
      [class.ant-tree-switcher_open]="nzTreeNode.isExpanded && !nzTreeNode.isLeaf && !nzTreeNode.isLoading"
      [class.ant-tree-switcher_close]="!nzTreeNode.isExpanded && !nzTreeNode.isLeaf && !nzTreeNode.isLoading"
      [class.ant-tree-switcher-noop]="nzTreeNode.isLeaf && !nzTreeNode.isLoading"
      [class.ant-tree-switcher-disabled]="nzTreeNode.isDisabled && !nzTreeNode.isLoading"
      [class.ant-tree-iconEle]="nzTreeNode.isLoading && !nzTreeNode.isLeaf"
      [class.ant-tree-icon_loading]="nzTreeNode.isLoading && !nzTreeNode.isLeaf"
      [class.ant-tree-icon__open]="nzTreeNode.isLoading && nzTreeNode.isExpanded && !nzTreeNode.isLeaf"
      [class.ant-tree-icon__close]="nzTreeNode.isLoading && !nzTreeNode.isExpanded && !nzTreeNode.isLeaf"
      (click)="_clickExpand($event, nzTreeNode)">
    </span>
  </ng-container>
  <ng-container #checkbox *ngIf="nzCheckable">
    <span
      class="ant-tree-checkbox"
      [class.ant-tree-checkbox-checked]="nzTreeNode.isChecked && nzTreeNode.isAllChecked"
      [class.ant-tree-checkbox-disabled]="nzTreeNode.isDisabled || nzTreeNode.isDisableCheckbox"
      [class.ant-tree-checkbox-indeterminate]="nzTreeNode.isHalfChecked"
      (click)="_clickCheckBox($event, nzTreeNode)">
        <span class="ant-tree-checkbox-inner"></span>
    </span>
  </ng-container>
  <ng-container *ngIf="!nzTreeTemplate">
    <span
      title="{{nzTreeNode.title}}"
      class="ant-tree-node-content-wrapper"
      [class.ant-tree-node-selected]="nzTreeNode.isSelected"
      [class.ant-tree-node-content-wrapper-open]="nzTreeNode.isExpanded && nzTreeNode.getChildren().length>0"
      [class.ant-tree-node-content-wrapper-close]="!nzTreeNode.isExpanded && nzTreeNode.getChildren().length>0"
      [class.ant-tree-node-content-wrapper-normal]="nzTreeNode.getChildren().length>0"
      [attr.draggable]="nzDraggable"
      [attr.aria-grabbed]="nzDraggable">
        <span class="ant-tree-title">
          <ng-container *ngIf="matchValue.length==2">
            <span>
              {{matchValue[0]}}<span class="font-highlight">{{nzSearchValue}}</span>{{matchValue[1]}}
            </span>
          </ng-container>
          <ng-container *ngIf="matchValue.length!=2">
            {{nzTreeNode.title}}
          </ng-container>
        </span>
    </span>
  </ng-container>
  <ng-template
    [ngTemplateOutlet]="nzTreeTemplate"
    [ngTemplateOutletContext]="{ $implicit: nzTreeNode }">
  </ng-template>

  <ul class="ant-tree-child-tree ant-tree-child-tree-open"
    [attr.data-expanded]="nzTreeNode.isExpanded"
    [@expandState]="(nzTreeNode.getChildren().length>0 && nzTreeNode.isExpanded)?'active':'inactive'">
    <nz-tree-node *ngFor="let node of nzTreeNode.children" [nzTreeNode]="node"
      [nzShowLine]="nzShowLine"
      [nzDraggable]="nzDraggable"
      [nzCheckable]="nzCheckable"
      [nzShowExpand]="nzShowExpand"
      [nzSearchValue]="nzSearchValue"
      [nzAsyncData]="nzAsyncData"
      [nzMultiple]="nzMultiple"
      [nzBeforeDrop]="nzBeforeDrop"
      [nzCheckStrictly]="nzCheckStrictly"
      [nzDefaultExpandAll]="nzDefaultExpandAll"
      [nzDefaultExpandedKeys]="nzDefaultExpandedKeys"
      [nzDefaultSelectedKeys]="nzDefaultSelectedKeys"
      [nzTreeTemplate]="nzTreeTemplate"
      (clickNode)="clickNode.emit($event)"
      (dblClick)="dblClick.emit($event)"
      (contextMenu)="contextMenu.emit($event)"
      (clickCheckBox)="clickCheckBox.emit($event)"
      (clickExpand)="clickExpand.emit($event)"
      (nzDragStart)="nzDragStart.emit($event)"
      (nzDragEnter)="nzDragEnter.emit($event)"
      (nzDragOver)="nzDragOver.emit($event)"
      (nzDragLeave)="nzDragLeave.emit($event)"
      (nzDrop)="nzDrop.emit($event)"
      (nzDragEnd)="nzDragEnd.emit($event)">
    </nz-tree-node>
  </ul>
</li>
